<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/chart/bar.js"></script>
<script type="text/javascript" src="js/chart/line.js"></script>

</head>
<body>
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main"
		style="height: 500px; border: 1px solid #ccc; padding: 10px;">
		
	</div>
	<script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: '/js'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line'
        ],
        function (ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['上班','下班']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['7月1日','7月1日','7月1日','7月1日','7月1日','7月1日','7月1日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'上班',
                        type:'bar',
                        data:[8,9,8,9,8,9,8]
                    },
                    {
                        name:'下班',
                        type:'bar',
                        data:[18,19,18,19,18,19,18]
                    }
                ]
            });
        });
       </script>     	
</body>
</html>